<template>
  <div class="switchcont">
    <el-header ref="header" style="height: 60px">
      <span class="title">视频教学辅助平台</span>
      <close ref="close"></close>
    </el-header>
    <div class="conten">
      <div
        class="sort"
        :class="$store.state.pxswitch ? 'active' : ''"
        @click="changeSchema(true)"
      >
        <img v-show="$store.state.pxswitch" src="@/assets/images/loads.gif" />
        <i class="iconfont el-icon-pxms"></i>
        <br />
        培训模式
        <!-- <button :class="$store.state.pxswitch ? 'active' : ''">
          {{ $store.state.pxswitch ? "使用中" : "启用" }}
        </button> -->
      </div>
      <!-- <i class="el-icon-sort rotate"></i> -->
      <div
        class="sort sort2"
        :class="!$store.state.pxswitch ? 'active' : ''"
        @click="changeSchema(false)"
      >
        <img v-show="!$store.state.pxswitch" src="@/assets/images/loads.gif" />
        <i class="iconfont el-icon-xueshengguanli"></i>
        <br />
        考试模式
        <!-- <button :class="!$store.state.pxswitch ? 'active' : ''">
          {{ !$store.state.pxswitch ? "使用中" : "启用" }}
        </button> -->
      </div>
      <div class="sort" style="color: #31c1c1">
        <i class="el-icon-circle-plus"></i>
        <br />
        增加拓展
        <!-- <button :class="!$store.state.pxswitch ? 'active' : ''">
          {{ !$store.state.pxswitch ? "使用中" : "启用" }}
        </button> -->
      </div>
    </div>
    <div class="footer">
      <ul>
        <li>
          模式状态：当状态图标旋转时,表示该系统处于该工作模式;当状态图片不存在时,表示该工作模式未启用！
        </li>
        <li>
          系统同一时间只能处于一种工作模式，一旦启动，当存在正在运行的培训或考试时，用户将无法切换模式！
        </li>
        <li>仅当正在运行的考试或者培训结束后，才能进行模式切换！</li>
      </ul>
    </div>
    <div v-show="loading" class="loading">
      <i class="el-icon-loading"></i>
      <p>加载中...</p>
    </div>
  </div>
</template>

<script>
import Close from "@/components/Close";
export default {
  name: "SwitchTest",
  components: { Close },
  data() {
    return {
      // pxswitch:true
      loading: false,
    };
  },
  computed: {
    // pxswitch() {
    //   return this.$store.state.pxswitch;
    // },
  },
  mounted() {},

  methods: {
    changeSchema(newVal) {
      this.$store.commit("setPxwitch", newVal);
      this.$store.commit("clearTags");
      localStorage.setItem("pxwitch", newVal);
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$router.push("/index");
      }, 1600);
    },
  },
};
</script>

<style lang="scss" scoped>
.switchcont {
  height: 90vh;
  width: 100vw;
  // font-size: 12px;
  position: relative;

  .el-header {
    color: white;
    background: #025050;
    text-align: center;
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      height: 60px;
    }
    span {
      font-size: 26px;
    }
    .toggle {
      position: absolute;
      top: 0;
      left: 20px;
      line-height: 60px;
    }
    .title {
      position: absolute;
      top: 0;
      left: 166px;
      line-height: 60px;
      font-size: 22px;
      transform: translateX(-50%);
    }
  }
  .conten {
    width: calc(100% - 20vw);
    position: absolute;
    left: 20vw;
    top: 35%;
    .sort {
      float: left;
      cursor: pointer;
      font-size: 2vw;
      font-weight: bold;
      position: relative;
      border: 2px solid #31c1c1;
      width: 15vw;
      box-sizing: border-box;
      padding: 1.5vw 0;
      border-radius: 0.3vw;
      line-height: 1.7em;
      background: #f2f2f2;
      margin-right: 2vw;
      color: #7f7f7f;
      button {
        position: absolute;
        bottom: -40%;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 15px;
        width: 210px;
        color: #fff;
        font-size: 32px;
        background: rgba(0, 0, 0, 0.37);
        padding: 8px 0;
      }
      .active {
        background: #31c1c1;
      }
      img {
        position: absolute;
        top: 12%;
        left: 11%;
        background: #fff;
        padding: 0.3vw;
        border-radius: 50%;
      }
    }
    .active {
      background: #31c1c1;
      color: white;
    }

    i.rotate {
      position: absolute;
      left: 50%;
      top: 20%;
      transform: rotate(90deg) translate(62%, 50%);
      font-weight: bold;
      font-size: 6vw;
    }
  }

  i {
    font-size: 2.5em;
  }

  .footer {
    position: absolute;
    bottom: 10vh;
    width: 82%;
    padding-left: 35vw;
    transform: translateX(-56%);
    border-top: 2px solid #fff;
    left: 48%;
    ul {
      text-align: left;
      padding-top: 15px;
      padding-left: 45px;

      li {
        font-size: 1.3vw;
        line-height: 2.5vw;
        list-style: disc;
      }
    }
  }
  .loading {
    position: relative;
    width: 100vw;
    z-index: 2222;
    height: 100vh;
    background: rgba(0, 0, 0, 0.37);
    color: white;
    p,
    i {
      position: absolute;
      left: 48%;
    }
    i {
      top: 47%;
    }
    p {
      top: 53%;
    }
  }
}
</style>
